<template>
  <div>
    <div
      id="content"
      style="height: 800px"
      v-loading="loading"
      element-loading-text="稍等片刻"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      loading: true,
      dataMap: {},
    };
  },
  // 清空计时器，传递计时器唯一标识符（自定义
  created() {
    setTimeout(() => {
      this.findData();
    }, 1000);
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    findData() {
      this.page_query({ page: 1, pageSize: 6 }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.comfirmed;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.severe;
        });
        let res3 = this.dataList.list.map((item) => {
          return item.suspected;
        });
        let res4 = this.dataList.list.map((item) => {
          return item.dead;
        });
        let res5 = this.dataList.list.map((item) => {
          return item.cure;
        });
        let res6 = this.dataList.list.map((item) => {
          return item.province;
        });
        this.initEchart(res1, res2, res3, res4, res5, res6);
      });
    },
    initEchart(res1, res2, res3, res4, res5, res6) {
      // String(res6[0]),String(res6[1]),String(res6[2]),String(res6[3]),String(res6[4]),String(res6[5])
      // echarts.init(document.getElementById("content")).dispose();
      var myChart = echarts.init(document.getElementById("content"));
      var option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
                ["省份", ...res6],
                ["确诊人数", ...res2],
                ["死亡人数", ...res4],
                ["治愈人数", ...res5],
                ["疑似人数", ...res3],
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row',areaStyle: {}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row',areaStyle: {}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row',areaStyle: {}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row',areaStyle: {}},
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: '省份',
                    value: [...res6],
                    tooltip: '2012'
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    myChart.setOption(option);
    },
  },
};
</script>